<template>
    <div id="app">
        <div class="page">
            <ygg-radio-group v-model="city">
                <ygg-radio label="北京" val="beijing"/>
                <ygg-radio label="上海" val="shanghai"/>
                <ygg-radio label="广州" val="guangzhou"/>
            </ygg-radio-group>

            <div>
                <button @click="city = 'beijing'">北京</button>
                <button @click="city = 'shanghai'">上海</button>
                <button @click="city = 'guangzhou'">广州</button>
            </div>

            <div>
                {{city}}
            </div>
            <ygg-radio label="山东" v-model="flag"/>
            <button @click="flag = !flag">flag:{{flag}}</button>
        </div>
    </div>
</template>

<script>

    import YggIcon from "./components/ygg-icon";
    import YggRadio from "./components/radio/ygg-radio";
    import YggRadioGroup from "./components/radio/ygg-radio-group";

    export default {
        components: {YggRadioGroup, YggRadio, YggIcon},
        data() {
            return {
                flag: true,
                city: 'shanghai',
            }
        },
        methods: {},
    }

</script>

<style lang="scss">
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
    }
</style>
